import { Tag } from 'antd-mobile'
import { LocationFill } from 'antd-mobile-icons'
import styles from '../css/city.module.css'
import { useLoaderData, useParams } from 'react-router-dom'

function CityTop(props) {
  const { location, hot } = useLoaderData()
  const params = useParams()

  return (
    <div className={styles.cityTopBox}>
      {/* 定位区域 */}
      <div className={styles.localBox}>
        <span>当前城市：</span>
        {/* 定位的小图标 */}
        <LocationFill
          fontSize={20}
          color="#15A5C9"
        />
        <span
          className={styles.localName}
          onClick={() => props.saveCity(params.type, location)}
        >
          {location}
        </span>
      </div>

      {/* 热门城市 */}
      <div className={styles.hotBox}>
        <div className={styles.hotTitle}>热门城市</div>
        <div className={styles.hotCity}>
          {/* 循环渲染热门城市 */}
          {hot.map((item, i) => (
            <Tag
              key={i}
              color="#efefef"
              className={styles.hotCityItem}
              onClick={() => props.saveCity(params.type, item.name)}
            >
              {item.name}
            </Tag>
          ))}
        </div>
      </div>
    </div>
  )
}

export default CityTop
